/* HTML的DOM querySelector()方法可以不需要额外的jQuery等支持，也可以方便的获取DOM元素，语法跟jQuery类似 */
/* querySelector() 方法仅仅返回匹配指定选择器的第一个元素。如果你需要返回所有的元素，
   请使用 querySelectorAll() 方法替代。*/
var introduce = document.querySelector('.g-introduce-content');
var pic = document.querySelector('.g-glass-pic');
var img = pic.querySelector('img');
var cover = document.querySelector('.g-glass-cover');
var list = document.querySelector('.g-glass-list');
var imgs = list.querySelectorAll('img');
var detail = document.querySelector('.g-glass-detail');

pic.onmouseover = function () {
    cover.style.display = "block";
    detail.style.display = "block";
};

pic.onmouseout = function () {
    cover.style.display = "none";
    detail.style.display = "none";
};


/*改变鼠标触碰相对应的照片和边框的有无*/
/* addEventListener() 方法用于向指定元素添加事件句柄。*/
list.addEventListener('mouseover', function (e) {

    if (e.target.tagName == 'IMG') {        /*置空边框*/
        img.src = e.target.src;
        detail.style.backgroundImage = 'url(' + e.target.src + ')';
        imgs.forEach(function (item) {
            item.className = '';
        });
        e.target.className = 'g-glass-current';
    }
});
pic.addEventListener('mousemove', function (e) {
    /*clientX 事件属性返回当事件被触发时鼠标指针相对于浏览器页面（或客户区）的水平坐标。
    客户区指的是当前窗口。*/
    var x = e.clientX,
        y = e.clientY;
    /*getBoundingClientRect用于获取某个元素相对于视窗的位置集合。集合中有top, right, bottom, left等属性。*/
        cx = pic.getBoundingClientRect().left;
        cy = pic.getBoundingClientRect().top;
        /*offsetWidth实际获取的是盒模型(width + border + padding)*/
        tx = x - cx - cover.offsetWidth / 2;
        ty = y - cy - cover.offsetHeight / 2;
        if (tx < 0) {
            tx = 0;
        }
        if (tx > 350) {
            tx = 350;
            /* tx = img.width - cover.width = 500 - 150 = 350; */
        }
        if (ty < 0) {
            ty = 0;
        }
        if (ty > 350) {
            ty = 350;
            /* ty = img.height - cover.height = 300; */
        }
        detail.style.backgroundPosition = tx / 350 * 100 + "%" + ty / 350 * 100 + "%";
        cover.style.left = tx + "px";
        cover.style.top = ty + "px";
    });
/*数量改变总价改变*/
$(function () {
    var content = $("#g-price");
    var details = $("#details");
    var a = $("#g-number");
    $("#g-number-add").click(function () {
        a.val(parseInt(a.val())+1);
        details.text(content.text()*a.val());
        $("#g-number-delete").removeAttr("disabled");       //当数量增加时，解除减号的不可读状态
        /*total();*/
    });
    $("#g-number-delete").click(function () {
        if (parseInt(a.val())>1) {                                       //判断数量值大于1时才可以减少
            a.val(parseInt(a.val()) - 1);
            details.text(content.text()*a.val());
        }else {
            $("#g-number-delete").attr("disabled","disabled");       //当数量为1时，减号为不可读状态
        }
    });
    //删除部分为总价随数量增加而增加的部分，3.95是单价
});


/*选项卡*/
var tab1 = document.getElementById("tab1");
var li1 = tab1.getElementsByTagName("li");
var tab2 = document.getElementById("tab2");
var li2 = tab2.getElementsByTagName("li");
for (var i = 0; i < li1.length; i++) {
    li1[i].index = i;
    li1[i].onclick = function () {
        for (var i = 0; i < li1.length; i++) {
            li1[i].className ="";
            li2[i].style.display = "none";
            li2[this.index].className ="";
            li2[this.index].className = "g-content1";
            li1[i].style.border = "none";
            li1[this.index].style.border = "1px solid #CFBFB1";
            li1[this.index].style.borderBottom = "none";
            li1[this.index].style.borderTopColor = "red";
        }
        this.className = "g-active";
        li2[this.index].style.display = "block";
    };
}



/*淡入淡出*/
function task() {
    var img = document.querySelector("#g-slider>.g-show");
    img.className = "";
    if(img.nextElementSibling != null)
        img.nextElementSibling.className = "g-show";
    else
        document.querySelector(
            "#g-slider>:first-child"
        ).className="g-show";
}
var timer = setInterval(task,3000);
var slider = document.getElementById("g-slider");
slider.onmouseover=function () {
    clearInterval(timer);
    timer=null;
};
slider.onmouseout=function () {
    timer=setInterval(task,3000);
};
//传价格的请求
function transfer(){
    var goodsNumber=document.location.href.split('=')[1];
    var buy = $("#buy");
    var perice=$(".payPerices").text()
    buy.click(function () {
        console.log(perice);
        var num = $(".g-button-left").val();
        console.log(num);
        $.ajax({
            url:"http://localhost:8080/user/nowBuyGoods",
            async:false,
            data:{
                'number':num,
                'goodsId':goodsNumber,
                'perice':perice
            },
            type:"GET",
            dataType:"JSON",
            success:function(data){
               if(data.code==100){
                   window.location.href='/user/shoppingSettlement';
               }
               else {
                   alert("操作失败！");
               }
            },
        });
    });
}
transfer();

//评论框
var addComment = $("#addComment");
var comment = $(".comment");
addComment.click(function () {
    comment.fadeToggle();
});
